<template>
  <div class="shopcart">
    <div class="left">
      <div class="cart" slot="default" @click="showcartlist">
        <div class="icon" :class="{'bgc':totalprice>0}">
          <div class="count">
            <span class="total">{{totalcount}}</span>
          </div>
          <span class="iconfont">&#xe86e;</span>
        </div>
        <!-- <div class="num">{{totalcount}}</div> -->
      </div>
      <div class="price">
        <span class="money">￥{{totalprice}}</span>
      </div>
      <div class="delivery">
        <span class="desc">另需配送费￥{{seller.deliveryPrice}}元</span>
      </div>
    </div>
    <div class="right" :class="{'bgc':totalprice>=20}">
      <div class="text" :class="{'bgheight':totalprice>=20}">{{minprice}}</div>
    </div>
    <van-action-sheet class="showcart" v-if="totalcount>0" v-model="show" title="标题">
      <ul class="cartlist" v-for="(food,index) in selectfoods" :key="index">
        <li class="list">
          <span class="name">{{food.name}}</span>
          <div class="rightcart"><span class="total">￥{{food.price*food.count}}</span><add-cart :food="food"></add-cart></div>
        </li>
      </ul>
    </van-action-sheet>
  </div>
</template>

<script>
import AddCart from '../cart/AddCart'
export default {
  name: 'shopcart',
  data () {
    return {
      show: false
    }
  },
  props: {
    seller: {
      type: Object
    },
    totalprice: {
      type: Number
    },
    totalcount: {
      type: Number
    },
    selectfoods: {
      type: Array
    }
  },
  computed: {
    minprice () {
      if (this.totalprice === 0) {
        return '20起送'
      } else if (this.totalprice < 20) {
        return `还差￥${20 - this.totalprice}元起送`
      } else {
        return '去结算'
      }
    }
  },
  methods: {
    showcartlist () {
      this.show = !this.show
    }
  },
  components: {
    AddCart
  }
}
</script>

<style scoped lang="scss">
.shopcart {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  background: rgb(53, 52, 52);
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    .cart {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(157, 160, 156);
      position: absolute;
      bottom: 8px;
      left: 18px;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: rgb(111, 110, 114);
        &.bgc {
          color: rgb(55, 224, 55);
        }
        .count {
          position: fixed;
          background-color: rgb(174, 177, 174);
          width: 16px;
          height: 18px;
          text-align: center;
          border-radius: 10px;
          z-index: 4;
          .total {
            color: red;
            font-weight: bold;
            text-align: center;
          }
        }
        .iconfont {
          font-size: 24px;
          line-height: 44px;
          position: absolute;
          left: 10px;
        }
      }
    }
    .price {
      margin-left: 76px;
      color: rgb(166, 168, 170);
      .money {
      }
    }
    .delivery {
      margin-left: 24px;
      color: rgb(166, 168, 170);
      .desc {
        font-size: 14px;
      }
    }
  }
  .right {
    width: 120px;
    height: 100%;
    background-color: rgb(85, 83, 83);
    display: flex;
    align-items: center;
    justify-content: center;
    &.bgc {
      background-color: rgb(73, 172, 78);
    }
    .text {
      font-weight: bold;
      color: rgb(172, 166, 166);
    }
    .bgheight {
      color: white;
    }
  }
  .showcart {
      z-index: 1000;
      max-height: 300px;
      .cartlist{
        padding: 4px 18px;
        .list{
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
          .name{}
          .rightcart{
             display: flex;
             .total{
               margin-right: 12px;
             }
          }
        }
      }
  }
}
</style>
